<template>
	<div id="setting">
		<div class="r1">
			<el-button icon="el-icon-plus" size="mini" type="primary" @click="addTask">添加</el-button>
			<el-button icon="el-icon-document" size="mini" type="warning" @click="seeTaskLog">日志</el-button>
		</div>
		<el-table :data="arr" border style="width: 100%">
			<el-table-column prop="jobId" label="id" align="center" width="50">
			</el-table-column>
			<el-table-column prop="beanName" label="bean" align="center" width="200">
			</el-table-column>
			<el-table-column prop="methodName" align="center" label="方法名" width="200">
			</el-table-column>
			<el-table-column prop="remark" align="center" label="备注">
			</el-table-column>
			<el-table-column prop="param" align="center" label="参数">
			</el-table-column>
			<el-table-column prop="cron" align="center" label="cron">
			</el-table-column>
			<el-table-column prop="enable" align="center" label="启用" width="70">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.enable" @change="changeEnable(scope.row)"></el-switch>
				</template>
			</el-table-column>
			<el-table-column align="center" label="创建时间" width="100">
				<template slot-scope="scope">
					<span>{{scope.row.createTime | DF}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作" width="100">
				<template slot-scope="scope">
					<el-dropdown trigger="click" @command="handleCommand">
						<span class="cz">操作<i class="el-icon-arrow-down el-icon--right"></i></span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item icon="el-icon-caret-right" :command="'run'+scope.row.jobId">执行一次
							</el-dropdown-item>
							<el-dropdown-item icon="el-icon-edit" :command="'edit'+scope.row.jobId">编辑
							</el-dropdown-item>
							<el-dropdown-item icon="el-icon-delete" :command="'delete'+scope.row.jobId">删除
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog title="添加任务" :visible.sync="dialogVisible" :before-close="handleDialogClose">
			<el-form :model="form" label-width="80px" :rules="formRules" ref="addTaskForm">
				<el-form-item label="bean" prop="beanName">
					<el-autocomplete v-model="form.beanName" placeholder="请输入bean的名称" :fetch-suggestions="queryBeanName"></el-autocomplete>
				</el-form-item>
				<el-form-item label="方法名" prop="methodName">
					<el-autocomplete v-model="form.methodName" placeholder="请输入方法名" :fetch-suggestions="queryBeanMethod"></el-autocomplete>
				</el-form-item>
				<el-form-item label="cron" prop="cron">
					<el-input v-model="form.cron" placeholder="请输入cron表达式"></el-input>
				</el-form-item>
				<el-form-item label="参数">
					<el-input v-model="form.param" placeholder="方法的执行参数"></el-input>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="form.remark" placeholder="备注"></el-input>
				</el-form-item>
				<el-form-item label="启用">
					<el-switch v-model="form.enable"></el-switch>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handlerAddSchedule">添加任务</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		addSchedule,
		getScheduleList,
		stopSchedule,
		enableSchedule,
		runOnce,
		searchBeanName,
		searchBeanMethod
	} from '@/api/schedule.js'
	import {parseTime} from '@/utils/index.js'
	export default {
		name: 'Timer',
		created() {
			this.getScheduleList()
		},
		data() {
			return {
				arr: [],
				form: {
					beanName: '',
					methodName: '',
					param: '',
					remark: '',
					cron: '',
					enable: true
				},
				dialogVisible: false,
				formRules: {
					beanName: [{
						required: true,
						message: '请输入bean',
						trigger: 'blur'
					}],
					methodName: [{
						required: true,
						message: '请输入执行的方法名',
						trigger: 'blur'
					}],
					cron: [{
						required: true,
						message: '请输入cron表达式',
						trigger: 'blur'
					}],
				}
			}
		},
		methods: {
			queryBeanName(str,cb){
				if(str.trim()==='') {
					return cb([])
				}
				searchBeanName(str).then(res=>{
					if(res.code==200){
						let obj=res.data.map(item=>{
							return {
								value:item
							}
						})
						cb(obj)
					}else{
						this.$message.closeAll()
						console.log(res)
						this.$message.error(res.data)
					}
				})
			},
			queryBeanMethod(str,cb){
				if(str.trim()==='') {
					return cb([])
				}
				searchBeanMethod(this.form.beanName,str).then(res=>{
					if(res.code==200){
						if(res.data==null){
							this.$message.closeAll()
							this.$message.warning("没找到该bean")
							cb([])
						}else{
							let obj=res.data.map(item=>{
								return {
									value:item
								}
							})
							cb(obj)
						}
					}else{
						this.$message.closeAll()
						console.log(res)
						this.$message.error(res.data)
					}
				})
			},
			addTask() {
				this.dialogVisible = true
			},
			handlerAddSchedule() {
				addSchedule(this.form).then(res => {
					if (res.code == 200) {
						this.$message.success(res.data)
						this.dialogVisible = false
						this.form = {
							beanName: '',
							methodName: '',
							param: '',
							remark: '',
							cron: '',
							enable: true
						}
						this.getScheduleList();
					} else {
						console.log(res)
						this.$message.error(res.data)
					}
				})
			},
			handleDialogClose(done) {
				if (this.form.beanName !== '' || this.form.methodName !== '' || this.form.cron !== '' || this.form
					.remark !== '' || this.form.param != '') {
					this.$confirm('确认关闭？')
						.then(_ => {
							done();
							this.$refs['addTaskForm'].resetFields()
						})
						.catch(_ => {});
				} else {
					done()
				}
			},
			getScheduleList() {
				getScheduleList().then(res => {
					console.log(res)
					if (res.code == 200) {
						this.arr = res.data
					} else {
						console.log(res)
						this.$message.error(res.data)
					}
				})
			},
			handleCommand(command) {
				if (command.startsWith('run')) {
					this.runOnce(command.slice(3))
				} else if (command.startsWith('edit')) {
					this.edit(command.slice(4))
				} else if (command.startsWith('delete')) {
					this.delete(command.slice(6))
				} else {
					console.log("没有找到命令", command)
					this.$message.error("没有找到命令" + command)
				}
			},
			runOnce(id) {
				runOnce(id).then(res => {
					if (res.code == 200) {
						this.$message.success(res.data)
					} else {
						console.log(res)
						this.$message.error(res.data)
					}
				})
			},
			edit(id) {
				console.log("edit", id)
			},
			delete(id) {
				console.log("delete", id)
			},
			changeEnable(item) {
				let f
				if (item.enable === true) {
					f = enableSchedule
				} else if (item.enable === false) {
					f = stopSchedule
				} else {
					console.log("不是预期的值")
					this.$message.error("vue预期错误")
				}
				if (f) {
					f(item.jobId).then(res => {
						if (res.code == 200) {
							this.$message.success(res.data)
						} else {
							console.log(res)
							this.$message.error(res.data)
						}
					})
				}
			},
			seeTaskLog(){
				this.$router.push("/log/scheduleLog")
			}
		},
		filters:{
			DF(d){
				return parseTime(d)
			}
		}
	}
</script>

<style lang="scss">
	#setting {
		padding: 20px;

		.r1 {
			margin-bottom: 20px;
		}

		.cz {
			cursor: pointer;

			&:hover {
				color: #f00;
			}
		}
	}
</style>
